<template>
  <div :style="{'width': paperWidth + 'px'}">
    <!-- <div v-for="item in paperData" :key="item.id" 
      :style="{'top': item.top, 'height': item.height, 'width': '100%'}" 
      :class="{'break-page': item.breakPage, 'paper-item': true}">
      {{item.content}}
    </div> -->
    <div v-for="(paperData, index) in papers" :key="index" 
      :style="{'height': paperHeight + 'px', 'margin-bottom': paperGap + 'px'}" class="paper-wrapper">
      <div v-for="(item, paperIndex) in paperData" :key="item.id" 
        :style="{'top': item.top, 'height': item.height,
         'width': paperWidth + 'px'}" 
        :class="{'break-page': paperIndex === 0 && index !== 0, 'paper-item': true}">
        {{item.content}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      paperHeight: 800,
      paperWidth: 600,
      paperGap: 50
    }
  },
  mounted () {
    // this.initPaperData()
    const paperHeight = 200
    const heights = [100, 100, 150, 200, 300]
    const tops = heights.map((height, index) => {
      var top = 0
      for (var i = 0; i < index; i++) {
        top += heights[i]
      }
      return top
    })
    console.log(tops)
    const papers = [[], [], [], [], [] ,[] , []]
    tops.forEach(element => {
      const paperNum = Math.max(Math.ceil(element / paperHeight), 1)
      console.log('paperNum', paperNum)
      papers[paperNum - 1].push({top: element})
    })
    console.log(papers)
  },
  computed: {
    papers() {
      return [[{
        content: '<div>???</div>',
        top: '100px',
        height: '100px',
        id: Math.random()
      }, {
        content: '<div>???</div>',
        top: '230px',
        height: '100px',
        id: Math.random()
      }], [{
        content: '<div>???</div>',
        top: '860px',
        height: '100px',
        id: Math.random()
      }]]
    }
  },
  components:{
  }
}
</script>

<style lang="css">
.break-page {
  background: grey;
}
.paper-item{
  position: absolute;
}
.paper-wrapper {
  background: goldenrod;
  border-radius: 15px;
}
</style>